<!--
 * @Descripttion: 百度Ueditor
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-08-09 17:22:11
 * @LastEditors: GW
 * @LastEditTime: 2021-09-25 15:37:49
-->
<template>
    <div>
        <vue-ueditor-wrap ref="ueditorRef" v-model="content" :config="myConfig"></vue-ueditor-wrap>
    </div>
</template>
<script type="text/javascript">
import VueUeditorWrap from 'vue-ueditor-wrap';
export default {
    components: {
        VueUeditorWrap
    },
    props: {
        content: {
            type: String,
            default: ''
        },
        customstyle: {
            type: Array,
            default: []
        }
    },
    data () {
        return {
            myConfig: {
                // 编辑器不自动被内容撑高
                autoHeightEnabled: false,
                //是否启用元素路径，默认是显示
                elementPathEnabled: false,
                //wordCount {Boolean} [默认值：true] //是否开启字数统计
                wordCount: false,
                //[默认值：true] //是否保持toolbar的位置不动，默认true
                autoFloatEnabled: false,
                // 初始容器高度
                initialFrameHeight: 400,
                //样式
                customstyle: this.customstyle,
                //配置功能
                toolbars: [
                    [
                        'source', //源代码
                        'undo', //撤销
                        'redo', //重做
                        'fontfamily', //字体
                        'fontsize', //字号
                        'bold', //加粗
                        'italic', //斜体
                        'underline', //下划线
                        'backcolor', //背景色
                        'forecolor', //字体颜色
                        'fontborder', //字符边框
                        'removeformat', //清除格式
                        'justifyleft', //居左对齐
                        'justifycenter', //居中对齐
                        'justifyright', //居右对齐
                        'justifyjustify', //两端对齐
                        'rowspacingtop', //段前距
                        'rowspacingbottom', //段后距
                        'lineheight', //行间距
                        'indent', //首行缩进
                        'horizontal', //分隔线
                        'insertorderedlist', //有序列表
                        'insertunorderedlist', //无序列表
                        'formatmatch', //格式刷
                        'pasteplain', //纯文本粘贴模式
                        'selectall', //全选
                        'preview', //预览
                        // 'time', //时间
                        // 'date', //日期
                        'paragraph', //段落格式
                        // 'simpleupload', //单图上传
                        'insertimage', //多图上传
                        'spechars', //特殊字符
                        // 'fullscreen', //全屏
                        'attachment', //附件
                        'edittip ', //编辑提示
                        'inserttable', //插入表格
                        'edittable', //表格属性
                        'charts', // 图表
                        'edittd', //单元格属性
                        'template', //模板
                    ]
                ],
                // 初始容器宽度
                initialFrameWidth: '800px',
                // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                //serverUrl: 'http://35.201.165.105:8000/controller.php',
                serverUrl: this.$Global.ApiBaseUrl + '/editorUpload',
                // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                UEDITOR_HOME_URL: '/UEditor/'
            },
        }
    },
    watch: {
        content (val) {
            this.backFun();
        }
    },
    mounted () {
        this.dealUeditorBug();
    },
    methods: {
        backFun () {
            this.$emit('update:content', this.content)
            console.log('_____子组件:', this.content);
        },
        dealUeditorBug () {
            //处理Ueditor 弹窗全屏bug
            console.log(this.$refs.ueditorRef)
            console.log(this.$refs.ueditorRef.forceInit)
        },
    }
}
</script>
<style lang="scss" scoped>
</style>